<template>
  <div :class="['WanNLDateView',showOrHideCls]" :style="{'z-index':z_index}" >
    <div class="back" @click="closeClick()"></div>
    <div class="view">
      <div class="btnDiv">
          <div class="nobtn" @click="cancelClick()">取消</div>
          <div class="okbtn" @click="determineClick()">确定</div>
      </div>
      <div class="domcom" :id="clsid">

      </div>

    </div>
  </div>
</template>



<style scoped>
.WanNLDateView{
  position: relative;width: 100%;height: 100%;
}
.back{
  position:absolute;left: 0;top:0;width: 7.5rem;height: 18rem;overflow:hidden;background-color: black;opacity: 0.2;
}
.view{
  position: fixed;bottom: 0;
  background-color:#FFFFFF;width: 7.5rem;height:6rem;border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;
}
.domcom{
  position: absolute;width: 100%;
}
.btnDiv{
  position: absolute;color: #BBBBBB;font-size: 0.3rem;line-height: 0.36rem;font-weight: 600;width: 6.5rem;left: 0.5rem;top:0.2rem;
}
.btnDiv .nobtn{
  float: left;
}
.btnDiv .okbtn{
  float: right;
}
.myPanel{
  position: absolute;overflow: hidden;display: block;top:0.8rem;font-weight: 500;font-size: 26px;color: #000000;width: 100%;
}
.myPanel .ulDiv{
  position: relative;display:flex;display: -webkit-flex;flex-direction:row;
}
.myPanel .ulcls{
  position: relative;width: 1.5rem;
}

.myPanel .ulcls .licls{
  position: relative;font-size: 20px;
}
/**选中**/
.myPanel .ulcls .licls_xz{

}
.myPanel .ulcls .licls .lidiv{

}

.myPanel .shadowup{
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 50;
  background: -webkit-linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));
  background: linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));
  pointer-events: none;
  border-bottom: 1px solid #efefef;
}
.myPanel .shadowdown{
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 50;
  bottom: 0;
  background: -webkit-linear-gradient(to top,#FFF,rgba(255,255,255,.6));
  background: linear-gradient(to top,#FFF,rgba(255,255,255,.6));
  pointer-events: none;
  border-top: 1px solid #efefef
}

</style>

<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import BottoMSelection from "@/gamejs/BottoMSelection";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';

let store = useStore();
let clsid=winApp.getClsId();
/**数据集合ID**/
let DataId_ID=Enum.no_txt+'wangnli198090';
let router = useRouter();




/*组件挂载完成后执行的函数；*/
onMounted(() => {
 // let className=document.getElementById(clsid).attributes;
  let scopeId=document.getElementById(clsid+'').attributes[0].name;
  console.log("WanNLDateView onMounted  万年历日期选择",scopeId,clsid);
  setInitDate(scopeId);
});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("WanNLDateView onUnmounted  卸载组件实例后 ",clsid);

});

let z_index=ref(0);
//挂载状态
let showView_status=computed(()=>{return store.state.view.wannldateView;});
//显示隐藏class
let showOrHideCls=ref('');
watch(showView_status,(newValue,oldValue)=>{
  console.log("WanNLDateView watch  showView_status===",newValue);
  if(newValue===Enum.view_status_1){//显示
    showOrHideCls.value='viewShow';
    store.state.view.viewZindex++;
    z_index.value=store.state.view.viewZindex;
    setInitDate();
  }
  if(newValue===Enum.view_status_2){//隐藏
    showOrHideCls.value='viewHide';
  }
});



function cancelClick(){
  console.log("WanNLDateView cancelClick 取消");
  closeClick();
}
function determineClick(){
  console.log("WanNLDateView determineClick 确定");


    let rslist=BottoMSelection.getSelectRS(DataId_ID);
    store.state.wnldate=rslist;
    console.log("WanNLDateView determineClick 确定",rslist);
    closeClick();


}
function closeClick(){
  store.state.view.wannldateView=Enum.view_status_2;
}







/**
 *
 * @param data {dataindex，listIndex}
 */
function moveRsFun(data){
  console.log('WanNLDateView moveRsFun ',DataId_ID,data);
  let dataindex=parseInt(data.dataindex);
  let listIndex=parseInt(data.listIndex);
  if(dataindex===1){//月
    let rslist=BottoMSelection.getSelectRS(DataId_ID);
    upDayFun(rslist[0],rslist[1]-1);
  }
}

/**
 * 更新某月天数
 * @param year
 * @param month 0-11
 */
function upDayFun(year,month){
  let dataNun=Util.getDaysInMonth(year,month);
  if(dataNun!==BottoMSelection.getData(DataId_ID).dataList[2].list.length){
    let list=[];
    for(let i=1;i<=dataNun;i++){
      list.push({'name':i+'日','value':i,'id':i});
    }
    BottoMSelection.setMouList(DataId_ID,2,list);
  }
  console.log('WanNLDateView moveRsFun ',dataNun);
}

function setInitDate(scopeId){
  console.log('WanNLDateView setInitDate');
  if(!BottoMSelection.getData(DataId_ID,1)){
    console.log('WanNLDateView setInitDate 初始');
    let _height=40;
    let _itemLen=7;
    DataId_ID=BottoMSelection.create(BottoMSelection.utilGetDate(store.state.date_y_start,store.state.data_y_end),moveRsFun,_height,_itemLen);
  }
  if(!BottoMSelection.getIsInitHtml(DataId_ID)){
    BottoMSelection.initUlelement(DataId_ID,scopeId,clsid);
  }
  console.log('WanNLDateView setInitDate 初始',store.state.wnldate);
  let rslist=store.state.wnldate;
  if(rslist.length===0){
    let _tdate=Util.getDateNow();
    rslist=[_tdate.year,_tdate.month,_tdate.day,_tdate.hours,_tdate.minutes];
  }
  BottoMSelection.setdataValue(0,rslist[0],DataId_ID,0);
  BottoMSelection.setdataValue(1,rslist[1],DataId_ID,0);
  BottoMSelection.setdataValue(2,rslist[2],DataId_ID,0);
  BottoMSelection.setdataValue(3,rslist[3],DataId_ID,0);
  BottoMSelection.setdataValue(4,rslist[4],DataId_ID,0);
}

</script>
